<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item prop="workOrderName">
        <el-input
          v-model="queryParams.workOrderName"
          placeholder="请输入工单名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item prop="scheduleCode">
        <el-input
          v-model="queryParams.scheduleCode"
          placeholder="请输入关联计划"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item prop="workOrderProduct">
        <el-input
          v-model="queryParams.workOrderProduct"
          placeholder="请输入产品"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['pro:workOrder:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="workOrderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed />
      <el-table-column type="index" label="序号" width="55" align="center" fixed />
      <el-table-column label="工单编号" align="center" prop="workOrderCode" width="150" fixed show-overflow-tooltip />
      <el-table-column label="工单名称" align="center" prop="workOrderName" width="120" fixed show-overflow-tooltip />
      <el-table-column label="工单进度" align="center" width="120" fixed>
        <template slot-scope="scope">
          <div class="progress">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.workOrderProgress"
                         :class="{'el-bg-inner-running': scope.row.workOrderProgress < 100, 'el-bg-inner-done': scope.row.workOrderProgress >= 100}"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="关联计划" align="center" prop="scheduleName" width="120"
                       show-overflow-tooltip
      />
      <el-table-column label="产品名称" align="center" prop="gbsGood.pdName" width="100" show-overflow-tooltip />
      <el-table-column label="产品编号" align="center" prop="gbsGood.pdCode" width="100" show-overflow-tooltip />
      <el-table-column label="规格型号" align="center" prop="gbsGood.pdSpecType" show-overflow-tooltip />
      <el-table-column label="产品类型" align="center" prop="gbsGood.gbsGoodClass.gcName" show-overflow-tooltip />
      <el-table-column label="单位" align="center" prop="gbsGood.gbsGoodUnit.guName" show-overflow-tooltip />
      <el-table-column label="需求日期" align="center" prop="workOrderRequire" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.workOrderRequire) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划数量" align="center" prop="workOrderNum" />
      <el-table-column label="计划开工时间" align="center" prop="workOrderRStart" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.workOrderRStart) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实际完工时间" align="center" prop="workOrderREnd" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.workOrderREnd) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实际生产数量" align="center" prop="workOrderComplete" width="120" />
      <el-table-column label="状态" align="center" prop="workOrderStatus" fixed="right">
        <template slot-scope="scope">
          <dict-tag :options="getOrderStatus" :value="scope.row.workOrderStatus" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.workOrderStatus === '0'"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleOrder(scope.row)"
            v-hasPermi="['pro:workOrder:edit']"
          >排产
          </el-button>
          <el-button
            v-if="scope.row.workOrderStatus !== '0'"
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="handleDetail(scope.row)"
            v-hasPermi="['pro:workOrder:edit']"
          >查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listWorkOrder } from '@/api/yyj/pro/workOrder'

export default {
  name: 'WorkOrder',
  dicts: ['pro_order_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 生产工单表格数据
      workOrderList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        scheduleCode: null,
        workOrderName: null,
        workOrderDesc: null,
        workOrderStatus: null,
        workOrderCloseR: null,
        workOrderProduct: null,
        workOrderRoute: null,
        workOrderBatch: null,
        workOrderNum: null
      }
    }
  },
  computed: {
    getOrderStatus() {
      return this.dict.type.pro_order_status
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 查看详情
    handleDetail(row) {
      this.$router.push({
        path: `/pro/order-detail/${row.workOrderCode}`
      })
    },
    // 进行排产
    handleOrder(row) {
      this.$router.push({
        path: `/pro/order-change/${row.workOrderCode}`
      })
    },
    /** 查询生产工单列表 */
    async getList() {
      this.loading = true
      const res = await listWorkOrder(this.queryParams)
      this.workOrderList = res.rows
      this.total = res.total
      this.loading = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.workOrderCode)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('pro/workOrder/export', {
        ...this.queryParams
      }, `workOrder_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
<style scoped lang="scss">
.progress ::v-deep .el-progress-bar__innerText {
  color: #fff !important;
}

/* 渐变进度条 */
/* 有时候涉及到自定义的样式比较多，而且相同的组件用的也多，那么可以在组件的样式前面加一个自定义的class类名。*/
/* 以进度条为例，我自定义组件下的进度条用到的element-ui的el-progress，我给它加了一个.progress的类名*/
/* 那么其他地方再用到element-ui的el-progress时，那么我给其他地方的el-progress设置样式的时候，就不会影响到我现在的自定义进度条组件中的el-progress了 */
.progress ::v-deep .el-bg-inner-running .el-progress-bar__inner {
  background-color: unset;
  background-image: linear-gradient(to right, #3587d8, #6855ff);
}

.progress ::v-deep .el-bg-inner-error .el-progress-bar__inner {
  background-image: linear-gradient(to right, #3587d8, #fb3a7e);
}

.progress ::v-deep .el-bg-inner-done .el-progress-bar__inner {
  background-image: linear-gradient(to right, #3587d8, #53ff54);
}
</style>
